<!-- eslint-disable vue/no-useless-template-attributes -->
<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/patient" is-telescreen />
    <n-modal v-model:show="show" preset="dialog" title="确认" content="你确认?"
             positive-text="确认" negative-text="再看看"
             @positive-click="updateInfo" @negative-click="cancelCallback"
    />
    <main-content>
      <n-card class="w-3/5 overflow-auto relative"
              style="box-shadow:  0 0 4px 0 rgba(0, 0, 0, 0.5);" title="个人信息" :segmented="{
                content: true,
                footer: 'soft'
              }"
      >
        <template #header-extra class="fixed top-0 left-0 right-0">
          <n-button v-show="type === 'READ'" type="primary" @click="type = 'MODIFY'">
            去修改
          </n-button>
        </template>
        <div class="flex flex-wrap ">
          <div v-for="(value, key) in labels" :key="key" class="w-1/2 px-4 py-3">
            <label> {{ labels[key] }}:</label>
            <n-input v-model:value="user[key]" :label="labels[key]"
                     :disabled="type === 'READ' || bans.findIndex(banKey => banKey === key) != -1"
                     :placeholder="'请输入'+labels[key]" :type="key === 'password' ? 'password' : undefined"
                     show-password-on="click"
            >
              <template #password-visible-icon>
                <n-icon :size="16" :component="GlassesOutline" />
              </template>
            </n-input>
          </div>
        </div>
        <template #footer>
          <div class="flex justify-center gap-4">
            <n-button v-show="type === 'MODIFY'" type="primary" @click="drawback">
              取消修改
            </n-button>
            <n-button v-show="type === 'MODIFY'" type="primary" @click="show = true">
              提交修改
            </n-button>
          </div>
        </template>
      </n-card>
    </main-content>
  </n-config-provider>
</template>
<script setup lang="ts">
import { NInput, NConfigProvider, NIcon, NButton, NCard, NModal } from 'naive-ui'
import { naiveTheme } from '../../shared/theme/naive_theme'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { ref, reactive, onMounted, toRaw } from 'vue'
import { axiosReq } from '../../shared/client/axios'
import { cloneDeep } from 'lodash'
import { GlassesOutline } from '@vicons/ionicons5'
import { actErr, actOK } from '../../shared/client/interact'
import { reqGetInfo, reqUpdateInfo, Pdetail } from './patient.def'
const type = ref<'READ' | 'MODIFY'>('MODIFY')
const show = ref(false)
const labels = reactive({
  uId:'用户ID',
  pId: '病人ID',
  name: '姓名',
  gender: '性别',
  cardId: '身份证号码',
  password:'密码',
  birthday: '出生日期',
  phone: '手机号',
  homeAddress: '家庭住址',
  contactPerson: '紧急联系人',
  contactPhone: '紧急联系方式',
  relation: '与紧急联系人关系',
})
const bans = ['name','uId','pId','gender']
let user = reactive<Pdetail>({
  uId:'',
  pId: '',
  password:'',
  name: '',
  gender: '',
  cardId: '',
  birthday: '',
  phone: '',
  homeAddress: '',
  contactPerson: '',
  contactPhone: '',
  relation: '',
})
let backup: any = null
function changeType(target: any,origin: any) {
  target.uId = origin.uid.toString()
  target.pId = origin.pid.toString()
  target.birthday = origin.birthday.split('T')[0].replaceAll('-','/')
}
onMounted(async() => {
  if(!import.meta.env.SSR) {
    const data = await reqGetInfo(axiosReq)
    user = reactive(data.data.Info)
    backup = cloneDeep(data.data.Info)
    changeType(user,data.data.Info)
    if(!user.gender) {
      user.gender = '男'
    }else {
      user.gender = '女'
    }
    type.value = 'READ'
  }
})

async function updateInfo() {
  const data = await reqUpdateInfo(axiosReq,user)
  if(data.code == 200) {
    actOK('修改成功')
  }else{
    actErr('修改失败')
  }
  backup = cloneDeep(toRaw(user))
  type.value = 'READ'
}
function drawback() {
  user = reactive(cloneDeep(backup))
  changeType(user,backup)
  type.value = 'READ'
}
function cancelCallback() {
  show.value = false
}
</script>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
